<template>
    <div>
        <h2>房号修改</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房号名称</td>
                    <td>
                        <input type="text" v-model="queryInfo.numberName" placeholder="请输入房型名称"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">房型外键</td>
                    <td>
                        <select v-model="queryInfo.roomTypeId">
                            <option value="">请选择</option>
                            <option v-for="item in data.list" :value="item.id" :key="item.id">{{item.roomTypeName}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">排序</td>
                    <td>
                        <input type="text" v-model="queryInfo.order"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">备注</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="queryInfo.desc">

                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">状态</td>
                    <td>
                        
                        <input type="radio" name="state" :value="1" v-model="queryInfo.state" />上架
                        <input type="radio" name="state" :value="0"  v-model="queryInfo.state"/>下架
                       
                    </td>
                </tr>
               
                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" @click="ok" value="修改房号" class="btn btn-primary" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
let route=useRoute();
let router=useRouter();
let queryInfo=reactive({
    
  numberName: "",
  roomTypeId: "",
  order: "",
  desc: "",
  state: 1,
  id:route.query.id

})
//房型展示
onMounted(()=>{
    GetRoomTypeList()
    Fantian();
})
const Fantian=()=>{
    axios({
        url:'/api/RoomNumber/GetRoomNumberId',
        method:'get',
        params:{ id:route.query.id}
    })
    .then((res)=>{
        queryInfo.numberName=res.data.numberName;
        queryInfo.roomTypeId=res.data.roomTypeId;
        queryInfo.order=res.data.order;
        queryInfo.desc=res.data.desc;
        queryInfo.state=res.data.state;
    })
}
const ok=()=>{
    if(queryInfo.numberName==''){
        alert('房号名称不能为空');
        return;
    }
    if(queryInfo.roomTypeId==''){
        alert('房型不能为空');
        return;
    }
    if(queryInfo.desc==''){
        alert('排序不能为空');
        return;
    }
    if(queryInfo.order==''){
        alert('备注不能为空');
        return;
    }
    axios({
        url:'/api/RoomNumber/GetRoomNumberNumUpdate',
        method:'put',
        data:queryInfo
        
    })
    .then((res)=>{
        console.log(res);
        if(res.data==1){
            alert('房号修改成功');
            router.push("/RoomNumberList")
            
        }
        else if(res.data==-1){
            alert('房号名称已存在')
        }

        else{
            alert('房号修改失败');
        }
        
    })
}
//获取房型
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0
})
let queryInfo1=reactive({
    Pageindex:1,
    PageSize:4,
    roomTypeName:'',
    max:'',
    min:''
})
//获取房型列表
const GetRoomTypeList=()=>{
    axios({
        url:'/api/RoomType/GetRoomTypesList',
        method:'get',
        params:queryInfo1
            
        
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totalCount=res.data.totalCount;
        data.totalPage=res.data.totalPage;
    })
}

</script>

<style scoped>

</style>